<!DOCTYPE html>

<html>
<head>
	<title>AIL-Framework</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png')}}">
	<!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}" rel="stylesheet">

	<!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script>


</head>

<body>

	{% include 'nav_bar.html' %}

	<div class="container-fluid">
		<div class="row">

			{% include 'crawler/menu_sidebar.html' %}

			<div class="col-12 col-lg-10" id="core_content">

                <div class="card text-center border-danger my-2">
                    <div class="card-body text-danger">
                        <h4 class="card-title">Blacklist</h4>
                        <input type="text" class="form-control {%if error_code is not none %}{%if error_code==0 %}is-valid{% else %}is-invalid{%endif%}{%endif%}" id="blacklist_domain_input" placeholder="Domain" {% if domain %}value="{{ domain }}"{% endif %}>
                        <div class="invalid-feedback">
                            {%if error_code==2 %}
                                This Domain is already blacklisted
                            {% else %}
                                Incorrect address
                            {% endif %}
                        </div>
                        <div class="valid-feedback">
                            Blacklisted
                        </div>
                        <button type="button" class="btn btn-danger mt-2" onclick="window.location.href ='{{ url_for('crawler_splash.crawler_blacklist') }}?domain='+$('#blacklist_domain_input').val();">Blacklist Domain</button>
                    </div>
                </div>

                <table class="table table-striped table-bordered table-hover" id="myTable_1">
                    <thead class="thead-dark">
                    <tr>
                        <th style="max-width: 800px;">Blacklisted Domains</th>
                        <th style="max-width: 800px;"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for dom in blacklist %}
                        <tr>
                            <td>{{dom}}</td>
                            <td>
                                <a href="{{ url_for('crawler_splash.crawler_blacklist_delete') }}?domain={{dom}}">
                                    <button type="button" class="btn btn-outline-danger">Remove</button>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>


			</div>
		</div>
	</div>

</body>

<script>
var table
$(document).ready(function(){
		table = $('#myTable_1').DataTable(
			{
				"aLengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]],
				"iDisplayLength": 10,
				"order": [[ 0, "asc" ]]
			}
		);
});

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}
</script>
